<template>
	<view>
		<!-- 页首 -->
		<zw-header></zw-header>

		<!-- 面包屑 -->
		<bread-crumb pages="个人信息" separator="/"></bread-crumb>

		<!-- 左侧导航栏 -->
		<menu-wrapper active-index="1-1">
			<view class="profile-wrap">
				<view class="avatar-wrap">
					<view class="avatar-main">
						<image :src="userInfo.headImgUrl" />
						<view class="btn-edit" @click="chooseImage">
							<i class="icon i-edit"></i>
						</view>
					</view>
					<view class="btn-change" @click="chooseImage">修改头像</view>
				</view>
				<view class="base-wrap">
					<view class="title">基础资料</view>
					<view class="item">昵称：{{userInfo.nickName}}</view>
					<view class="item">性别：{{userInfo.gender | matchGender}}</view>
					<!-- <view class="item">自我介绍：{{userInfo.selfIntro || '待完善'}}</view> -->
					<view class="btn-edit" @click="hiddenProfileEditer = false;">
						<i class="icon i-edit"></i>
						<text>编辑</text>
					</view>
				</view>
			</view>
		</menu-wrapper>

		<!-- 头像裁剪 -->
		<avatar-cropper :hidden.sync="hiddenAvatarCropper" :imagePath.sync="imagePath" @change="avatarChange"></avatar-cropper>

		<!-- 编辑资料 -->
		<profile-editer :hidden.sync="hiddenProfileEditer" :userInfo="userInfo" @change="profileChange"></profile-editer>

		<!-- 页脚 -->
		<zw-footer></zw-footer>
	</view>
</template>

<script>
	import menuWrapper from '@/components/user/common/menu-wrapper.vue';
	import avatarCropper from '@/components/user/editer/avatar-cropper.vue';
	import profileEditer from '@/components/user/editer/profile-editer.vue';
	import {getAccToken} from 'userToken.js'
	import {
		mapState
	} from 'vuex';

	export default {
		components: {
			menuWrapper,
			avatarCropper,
			profileEditer
		},
		data() {
			return {
				imagePath: '',
				hiddenAvatarCropper: true,
				hiddenProfileEditer: true,
				userInfo:{},
				UpImg:'',
				
			}
		},
		onLoad() {
			this.getSelfInfo()
		},
		filters: {
			matchGender(gender) {
				switch (gender) {
					case 0:
						return '男';
					case 1:
						return '女';
					default:
						return '未知';
				}
			},
			formatBirthday(birthday) {
				if (birthday) {
					const units = ['年', '月', '日'];
					return birthday.split('-').map((e, i) => e + units[i]).join('');
				}
				return '未知';
			}
		},
		methods: {
			getUserInfoUpd(item){
				var userInfoUpd = {}
				userInfoUpd.nickName = item.nickName;
				userInfoUpd.headImg = item.headImg;
				this.resetSetItemUser('userInfoUpd', JSON.stringify(userInfoUpd));
			},
			getSelfInfo() {
				this.uni_request({
					url: '/user/info',
					method: 'GET',
					success: (res) => {
						if (res.data.code == 0 || res.data.code == 200) {
							this.userInfo  = res.data.data
							this.$forceUpdate()
							this.getUserInfoUpd(res.data.data)
							uni.setStorageSync('userInfo',this.userInfo)
							
						} else {
							uni.showToast({
								title: res.data.msg,
								icon: "none"
							})
						}
					}
				})
			},
			getUpdInfo() {
				this.uni_request({
					url: '/user/info',
					method: 'PUT',
					data: {
						headImg: this.userInfo.headImg,
					},
					success: (res) => {
						if (res.data.code == 0 || res.data.code == 200) {
							this.getSelfInfo()
							uni.showToast({
								title: '修改成功',
								icon: "none"
							})
						} else {
							uni.showToast({
								title: res.data.msg,
								icon: "none"
							})
						}
					}
				})
			},
			chooseImage() {
				uni.chooseImage({
					count: 1,
					success: (res) => {
						this.imagePath = res.tempFilePaths[0];
						this.hiddenAvatarCropper = false;
					}
				});
			},
			avatarChange(e) {
				uni.showLoading({
					title: '上传中...',
					mask: true
				});
				var that = this;
				const uploadTask = uni.uploadFile({
					url: that.uploadUrl,
					filePath: e,
					name: 'file',
					header:{
						'authorization': 'Bearer ' + getAccToken(),
						'clientid':'383c41953b35476defd109ac92a82ad6',
					},
					success: function(res) {
						uni.hideLoading()
						var data  = JSON.parse(res.data)
						that.userInfo.headImg = data.data.ossId
						that.hiddenAvatarCropper = true;
						that.getUpdInfo()
						
						// that.info.headImg = data.data.url
					}
				});
				
			},
			profileChange(e) {
				uni.showLoading({
					title: '提交中...',
					mask: true
				});
				this.uni_request({
					url: '/user/info',
					method: 'PUT',
					data: {
						gender: e.gender,
						nickName: e.nickName,
					},
					success: (res) => {
						uni.hideLoading()
						if (res.data.code == 0 || res.data.code == 200) {
							this.getSelfInfo()
							this.hiddenProfileEditer = true;
							uni.showToast({
								title: '修改成功',
								icon: "none"
							})
							
						} else {
							uni.showToast({
								title: res.data.msg,
								icon: "none"
							})
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.profile-wrap {
		height: 100%;
		display: flex;
		margin-top: 20px;
		.avatar-wrap {
			width: 300px;
			display: flex;
			flex-direction: column;
			align-items: center;

			.avatar-main {
				position: relative;
				width: 115px;
				height: 115px;
				border: 2px solid #e3e3e3;
				border-radius: 50%;
				padding: 4px;
				background-color: $bg-color;
				@extend %flex-align-center;justify-content: center;
				&:hover {
					.btn-edit {
						display: block;
					}
				}
				image{
					width: 100%;height: 100%;border-radius: 50%;
				}
				

				.btn-edit {
					cursor: pointer;
					position: absolute;
					bottom: 10px;
					right: 10px;
					border: 1px solid $border-color;
					width: 30px;
					height: 30px;
					line-height: 25px;
					border-radius: 50%;
					text-align: center;
					background-color: rgba(0, 0, 0, .5);
					display: none;

					.icon {
						color: #FFFFFF;
						font-size: 16px;
					}
				}
			}

			.btn-change {
				color: #4a90e3;
				padding-top: 15px;
				cursor: pointer;
			}
		}

		.base-wrap {
			flex: 1;
			position: relative;

			.title {
				font-size: 16px;
				font-weight: bold;
				color: $text-color;
				line-height: 40px;
			}

			.item {
				line-height: 40px;
				color: #666;
			}

			.btn-edit {
				position: absolute;
				top: 0;
				right: 0;
				color: #4a90e3;
				line-height: 40px;
				cursor: pointer;

				.icon {
					color: #4a90e3;
					font-size: 16px;
					margin-right: 5px;
				}
			}
		}
	}
</style>
